#Catalog {
    width: 50%;
    margin: auto;
}
#Catalog table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#Catalog th, #Catalog td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
#Catalog table tr th[colspan="2"],
#Catalog table tr td[colspan="2"] {
    background-color: #d3d3d3;
}
#Catalog table tr:not(:last-child):not(:first-child):not(:nth-child(5)):not(:nth-last-child(2)) td {
    background-color: #f2f2f2;
}
#Catalog input[type="text"] {
    width: 95%;
    padding: 5px;
    margin: 2px 0;
    background-color: #f2f2f2;
}
/* Adjust the width of the first and second columns to a 3:7 ratio */
#Catalog table tr td:first-child {
    width: calc(30% - 8px); /* 30% of the table width minus padding and border */
}
#Catalog table tr td:last-child {
    width: calc(70% - 8px); /* 70% of the table width minus padding and border */
}
/* Specific widths for certain input fields */
#Catalog input[name="state"] {
    width: calc(15% - 8px); /* 15% of the table width minus padding and border */
}
#Catalog input[name="zip"] {
    width: calc(25% - 8px); /* 25% of the table width minus padding and border */
}
#Catalog input[name="country"] {
    width: calc(35% - 8px); /* 35% of the table width minus padding and border */
}
#Catalog input[name="city"],
#Catalog input[name="first_name"],
#Catalog input[name="last_name"],
#Catalog input[name="expiry_date"],
#Catalog input[name="card_number"] {
    width: calc(50% - 8px); /* 50% of the table width minus padding and border */
}
#Catalog button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.table-container {
    width: 65%;
    margin: auto;
}
/*table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
/*    table-layout: fixed; !* 确保表格布局固定，每一列都均匀分布 *!*/
/*}*/
/*th, td {*/
/*    border: 1px solid black;*/
/*    text-align: left;*/
/*    padding: 8px;*/
/*    overflow: hidden; !* 防止内容溢出 *!*/
/*}*/
/*th {*/
/*    background-color: #f2f2f2;*/
/*}*/
/*.confirm-button {*/
/*    display: block;*/
/*    width: 100px;*/
/*    margin: 20px auto;*/
/*    padding: 10px;*/
/*    background-color: #4CAF50;*/
/*    color: white;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*}*/
/*.confirm-button:hover {*/
/*    background-color: #45a049;*/
/*}*/


/*table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
/*}*/
/*th, td {*/
/*    border: 1px solid black;*/
/*    text-align: left;*/
/*    padding: 8px;*/
/*}*/
/*th {*/
/*    background-color: #f2f2f2;*/
/*}*/
.confirm-button {
    display: block;
    width: 100px;
    margin: 20px auto;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
.confirm-button:hover {
    background-color: #45a049;
}